import React from 'react'
import { Button, Divider } from 'antd';
import { Input } from 'antd';
import { Select } from 'antd';
import { Form } from 'antd';
import { Checkbox, Row, Col } from 'antd';
import { Upload, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { Image } from 'antd';
import { Radio } from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';

const { Option } = Select;
const { TextArea } = Input;
const props = {
    name: 'file',
    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    headers: {
        authorization: 'authorization-text',
    },
    onChange(info) {
        if (info.file.status !== 'uploading') {
            console.log(info.file, info.fileList);
        }
        if (info.file.status === 'done') {
            message.success(`${info.file.name} file uploaded successfully`);
        } else if (info.file.status === 'error') {
            message.error(`${info.file.name} file upload failed.`);
        }
    },
};

function getBase64(img, callback) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
}

function beforeUpload(file) {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
        message.error('You can only upload JPG/PNG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
        message.error('Image must smaller than 2MB!');
    }
    return isJpgOrPng && isLt2M;
}

class AddGoods extends React.Component {

    state = {
        loading: false,
    };

    handleChange = info => {
        if (info.file.status === 'uploading') {
            this.setState({ loading: true });
            return;
        }
        if (info.file.status === 'done') {
            // Get this url from response in real world.
            getBase64(info.file.originFileObj, imageUrl =>
                this.setState({
                    imageUrl,
                    loading: false,
                }),
            );
        }
    };

    render() {
        const { loading, imageUrl } = this.state;
        const uploadButton = (
            <div>
                {loading ? <LoadingOutlined /> : <PlusOutlined />}
                <div style={{ marginTop: 8 }}>Upload</div>
            </div>
        );

        return (
            <div>
                <Form.Item
                    name={['user', '商品名称']}
                    label="商品名称"
                    rules={[
                        {
                            type: '商品名称',
                        },
                    ]}
                >
                    <Input style={{ width:350 }} />
                </Form.Item>
                <Divider />
                <Form.Item
                    name={['user', '商品编号']}
                    label="商品编号"
                    rules={[
                        {
                            type: '商品编号',
                        },
                    ]}
                >
                    <Input style={{ width:350 }} />
                </Form.Item>
                <Divider />
                <div>
                    <Form.Item label="商品分类">
                        <Input.Group compact>
                            <Form.Item
                                name={['class', 'classify']}
                                noStyle
                                rules={[{ required: true, message: 'classify is required' }]}
                            >
                                <Select style={{ width:240 }} placeholder={"请选择"}>
                                    <Option value="请选择">请选择</Option>
                                    <Option value="生鲜水果">生鲜水果</Option>
                                    <Option value="食品粮油">食品粮油</Option>
                                    <Option value="其他分类">其他分类</Option>
                                </Select>
                            </Form.Item>
                        </Input.Group>
                    </Form.Item>
                </div>
                <Divider />
                <Form.Item style={{ width:500 }} name={['user', 'introduction']} label="商品简介">
                    <Input.TextArea />
                </Form.Item>
                <Divider />
                <Checkbox.Group style={{ width: '100%' }}>
                    <h4>商品标签:</h4>
                    <Row>
                        <Col span={3}>
                            <Checkbox value="正品保证">正品保证</Checkbox>
                        </Col>
                        <Col span={3}>
                            <Checkbox value="坏品包赔">坏品包赔</Checkbox>
                        </Col>
                        <Col span={3}>
                            <Checkbox value="24小时退换">24小时退换</Checkbox>
                        </Col>
                    </Row>
                </Checkbox.Group>
                <Divider />
                <Form.Item
                    name={['user', '团长佣金']}
                    label="团长佣金"
                    rules={[
                        {
                            type: '团长佣金',
                        },
                    ]}
                >
                    <Input style={{ width:350 }} />
                </Form.Item>
                <Divider />
                <Form.Item
                    name={['user', '限购数量']}
                    label="限购数量"
                    rules={[
                        {
                            type: '限购数量',
                        },
                    ]}
                >
                    <Input style={{ width:350 }} />
                    <h3>0为不限购</h3>
                </Form.Item>
                <Divider />
                <Form.Item
                    name={['user', '商品价格']}
                    label="商品价格"
                    rules={[
                        {
                            type: '商品价格',
                        },
                    ]}
                >
                    <Input style={{ width:350 }} />
                </Form.Item>
                <Divider />
                <Form name="horizontal_login" layout="inline">
                    <h4>拼团价格:</h4>
                    <Form.Item
                        name="团购人数"
                    >
                        <Input placeholder="团购人数" />
                    </Form.Item>
                    <Form.Item
                        name="价格"
                    >
                        <Input placeholder="价格"/>
                    </Form.Item>
                    <Form.Item shouldUpdate={true}>
                        {() => (
                            <Button
                                type="primary"
                                htmlType="submit"
                            >
                                删除
                            </Button>
                        )}
                    </Form.Item>
                    <Form.Item shouldUpdate={true}>
                        {() => (
                            <Button
                                type="primary"
                                htmlType="submit"
                            >
                                添加
                            </Button>
                        )}
                    </Form.Item>
                </Form>
                <Divider />
                <Form.Item
                    name={['user', '市场价格']}
                    label="市场价格"
                    rules={[
                        {
                            type: '市场价格',
                        },
                    ]}
                >
                    <Input style={{ width:350 }} />
                </Form.Item>
                <Divider />
                <Form name="horizontal_login" layout="inline">
                    <h4>商品规格:</h4>
                    <Form.Item
                        name="名称"
                    >
                        <Input placeholder="名称" style={{ width:170 }} />
                    </Form.Item>
                    <Form.Item
                        name="货号"
                    >
                        <Input placeholder="货号" style={{ width:170 }} />
                    </Form.Item>
                    <Form.Item
                        name="价格"
                    >
                        <Input placeholder="价格" style={{ width:170 }} />
                    </Form.Item>
                    <Form.Item
                        name="库存"
                    >
                        <Input placeholder="库存" style={{ width:170 }} />
                    </Form.Item>
                    <Upload {...props}>
                        <Button icon={<UploadOutlined />}>Upload Image</Button>
                    </Upload>
                    <Form.Item shouldUpdate={true}>
                        {() => (
                            <Button
                                type="primary"
                                htmlType="submit"
                            >
                                删除
                            </Button>
                        )}
                    </Form.Item>
                    <Form.Item shouldUpdate={true}>
                        {() => (
                            <Button
                                type="primary"
                                htmlType="submit"
                            >
                                添加
                            </Button>
                        )}
                    </Form.Item>
                </Form>
                <Divider />
                <Form.Item
                    name={['user', '商品图片']}
                    label="商品图片"
                    rules={[
                        {
                            type: '商品图片',
                        },
                    ]}
                >
                    <Upload
                        name="avatar"
                        listType="picture-card"
                        className="avatar-uploader"
                        showUploadList={false}
                        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                        beforeUpload={beforeUpload}
                        onChange={this.handleChange}
                    >
                        {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                    </Upload>
                </Form.Item>
                <Divider />
                <Form.Item
                    name={['user', '拼团图片']}
                    label="拼团图片"
                    rules={[
                        {
                            type: '拼团图片',
                        },
                    ]}
                >
                    <Upload
                        name="avatar"
                        listType="picture-card"
                        className="avatar-uploader"
                        showUploadList={false}
                        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                        beforeUpload={beforeUpload}
                        onChange={this.handleChange}
                    >
                        {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                    </Upload>
                </Form.Item>
                <Divider />
                <Form name="horizontal_login" layout="inline">
                    <h4>商品相册:</h4>
                    <Form.Item>
                        <Upload
                            name="avatar"
                            listType="picture-card"
                            className="avatar-uploader"
                            showUploadList={false}
                            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                            beforeUpload={beforeUpload}
                            onChange={this.handleChange}
                        >
                            {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                        </Upload>
                    </Form.Item>
                    <Form.Item>
                        <Upload
                            name="avatar"
                            listType="picture-card"
                            className="avatar-uploader"
                            showUploadList={false}
                            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                            beforeUpload={beforeUpload}
                            onChange={this.handleChange}
                        >
                            {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                        </Upload>
                    </Form.Item>
                </Form>
                <Divider />
                <Form name="horizontal_login" layout="inline">
                    <h4>商品重量:</h4>
                    <Form.Item
                        name="商品重量"
                    >
                        <Input placeholder="商品重量" />
                    </Form.Item>
                    <Select style={{ width:120 }} placeholder={"千克"}>
                        <Option value="千克">千克</Option>
                        <Option value="克">克</Option>
                    </Select>
                </Form>
                <Divider />
                <Form.Item
                    name={['user', '商品库存']}
                    label="商品库存"
                    rules={[
                        {
                            type: '商品库存',
                        },
                    ]}
                >
                    <Input style={{ width:350 }} />
                    <h4>库存在商品存在货品时为不可编辑状态，库存数值取决于其货品数量</h4>
                </Form.Item>
                <Divider />
                <Form.Item
                    name={['user', '库存警告']}
                    label="库存警告"
                    rules={[
                        {
                            type: '库存警告',
                        },
                    ]}
                >
                    <Input style={{ width:350 }} />
                </Form.Item>
                <Divider />
                <Checkbox.Group style={{ width: '100%' }}>
                    <h4>加入推荐:</h4>
                    <Row>
                        <Col span={2}>
                            <Checkbox value="精品">精品</Checkbox>
                        </Col>
                        <Col span={2}>
                            <Checkbox value="新品">新品</Checkbox>
                        </Col>
                        <Col span={2}>
                            <Checkbox value="热销">热销</Checkbox>
                        </Col>
                    </Row>
                </Checkbox.Group>
                <Divider />
                <h4>免运费:是否为免运费商品</h4>
                <Radio.Group>
                    <Radio value={1}>是</Radio>
                    <Radio value={2}>否</Radio>
                </Radio.Group>
                <Divider />
                <Form.Item style={{ width:500 }} name={['user', 'beizhu']} label="商家备注">
                    <Input.TextArea placeholder="请输入备注信息,该信息仅供商家自己可见" />
                </Form.Item>
                <Divider />
                <Form.Item name={['user', 'xiangqing']} label="商品详情">
                    <TextArea rows={4} style={{ width:600 }} />
                </Form.Item>
            </div>
        )
    }
}

export {AddGoods as default}